<template>
  <div class="body">
    <div class="body-query">
      <p>请输入要查询用户的通行证号码：</p>
      <el-input placeholder="请输入内容" v-model="userAccount" clearable></el-input>
      <el-button type="primary" @click="queryinfo" class="change">查询</el-button>
    </div>
    

    <div class="body-info">
      <h2>用户通行证: {{userAccount}}</h2>
      <h2>用户昵称: {{username}}</h2>
      <h2>用户电子邮箱: {{userEmail}}</h2>
      <h2>用户手机号码：{{userPhoneNumber}}</h2>
      <h2>用户当前余额：{{userBalance}}</h2>
      <h2>用户注册类型: {{type}}</h2>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      userAccount :'',
      username :'',
      userEmail :'',
      userPhoneNumber :'',
      userBalance :'',
      type :'',
    }
  },

  methods: {
    async queryinfo(){

    const res2 = await this.$http.post('user/userInfoQuery',{
      userAccount : this.userAccount
    })

    this.username = res2.data.data.username
    this.userEmail =res2.data.data.email
    this.userPhoneNumber =res2.data.data.phoneNumber
    this.userBalance =res2.data.data.balance
    this.type =res2.data.data.userType
  }     
  },
}
</script>

<style>
.body{
  width: 80%;
  height: 70%;

  background-color: white;
  opacity: 1;

  margin-top: 100px;
  margin-left: 200px;
  border-radius:15px;
}

.body-avatar{
  margin-left: 140px;
  padding-top: 50px;
}

.el-upload{
  width: 262px;
  height: 262px;

  text-align: center;
}

.el-upload>i{
  margin-top: 110px;
}

.body-info{
  position: absolute;
  top: 170px;
  left: 900px;

  width: 500px;
  Line-height:80px;
}

.body-query{
  width: 300px;
  margin-left: 150px;
  font-size: 20px;
  padding-top: 200px;
}
</style>